{% extends "learning/base.html" %}

{% block title %}教师工作台 · 高中数学助手{% endblock %}

{% block content %}
<!-- Profile Header -->
<section class="card" style="max-width:900px;margin:0 auto 2rem;">
    <div style="background:linear-gradient(135deg,var(--primary-600),var(--primary-700));padding:2rem;border-radius:var(--radius-xl) var(--radius-xl) 0 0;color:white;text-align:center;">
        <div style="width:80px;height:80px;background:white;border-radius:50%;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;color:var(--primary-600);box-shadow:0 4px 20px rgba(0,0,0,0.15);">
            👨‍🏫
        </div>
        <h2 style="margin:0 0 0.5rem 0;font-size:1.75rem;">{{ request.user.get_full_name|default:request.user.username }}</h2>
        <div style="display:inline-flex;align-items:center;gap:0.5rem;background:rgba(255,255,255,0.2);padding:0.375rem 0.875rem;border-radius:var(--radius-full);font-size:0.875rem;">
            <span>🎓</span>
            <span>教师</span>
        </div>
    </div>
    <div style="padding:1.5rem 2rem;">
        <h3 style="margin:0 0 1.25rem 0;color:var(--text-primary);">编辑个人信息</h3>
        <form method="post" novalidate style="display:grid;gap:1.25rem;">
            {% csrf_token %}
            <input type="hidden" name="action" value="update_profile">
            {% for field in profile_form %}
                <div>
                    <label for="{{ field.id_for_label }}" style="display:block;margin-bottom:0.5rem;font-weight:500;color:var(--text-primary);">
                        {{ field.label }}{% if field.field.required %}<span style="color:var(--danger);margin-left:0.25rem;">*</span>{% endif %}
                    </label>
                    {{ field }}
                    {% if field.help_text %}
                        <small style="display:block;color:var(--text-secondary);margin-top:0.375rem;">{{ field.help_text }}</small>
                    {% endif %}
                    {% for error in field.errors %}
                        <small style="color:var(--danger);display:block;margin-top:0.375rem;">{{ error }}</small>
                    {% endfor %}
                </div>
            {% endfor %}
            <button class="btn-primary" type="submit" style="justify-self:start;padding:0.625rem 1.5rem;">
                💾 保存个人信息
            </button>
        </form>
    </div>
</section>

<!-- Student Management -->
<section class="card" style="max-width:900px;margin:0 auto 2rem;">
    <h3 style="margin:0 0 0.5rem 0;">👥 学生管理</h3>
    <p style="margin:0 0 1.5rem 0;color:var(--text-secondary);">
        关联学生后，他们的错题本将归属于你的指导范围。
    </p>
    
    <!-- Search Bar -->
    <form method="get" style="display:flex;gap:0.5rem;margin-bottom:1.5rem;">
        <input type="text" name="q" placeholder="搜索学生用户名" value="{{ search_query|default:"" }}" 
               style="flex:1;border-radius:var(--radius-md);border:1px solid var(--border-subtle);padding:0.625rem 1rem;background:var(--surface);">
        <button class="btn-secondary" type="submit" style="padding:0.625rem 1.25rem;white-space:nowrap;">
            🔍 搜索
        </button>
    </form>
    
    <!-- Link Student Form -->
    <div style="padding:1.25rem;background:var(--accent-soft);border-radius:var(--radius-lg);margin-bottom:1.5rem;">
        <h4 style="margin:0 0 1rem 0;color:var(--text-primary);">快速关联学生</h4>
        <form method="post" style="display:flex;gap:0.75rem;align-items:flex-start;flex-wrap:wrap;">
            {% csrf_token %}
            <input type="hidden" name="action" value="link_student">
            <div style="flex:1;min-width:200px;">
                <label for="id_student_username" style="display:block;margin-bottom:0.5rem;font-weight:500;font-size:0.875rem;color:var(--text-primary);">
                    学生用户名
                </label>
                {{ student_link_form.student_username }}
                {% for error in student_link_form.student_username.errors %}
                    <small style="color:var(--danger);display:block;margin-top:0.375rem;">{{ error }}</small>
                {% endfor %}
            </div>
            <button class="btn-primary" type="submit" style="margin-top:1.625rem;padding:0.625rem 1.25rem;">
                ➕ 关联学生
            </button>
        </form>
    </div>
    
    <!-- Search Results -->
    {% if search_results %}
        <div style="padding:1.25rem;background:var(--surface);border-radius:var(--radius-lg);margin-bottom:1.5rem;border:1px solid var(--border-subtle);">
            <h4 style="margin:0 0 1rem 0;color:var(--text-primary);">🔍 搜索结果</h4>
            <div style="display:flex;flex-direction:column;gap:0.75rem;">
                {% for student in search_results %}
                    <form method="post" style="display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.75rem 1rem;background:var(--surface-elevated);border-radius:var(--radius-md);border:1px solid var(--border-subtle);">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="link_student">
                        <input type="hidden" name="student_username" value="{{ student.username }}">
                        <div>
                            <strong style="color:var(--text-primary);">{{ student.username }}</strong>
                            {% if student.get_full_name %}
                                <span style="color:var(--text-secondary);margin-left:0.5rem;">（{{ student.get_full_name }}）</span>
                            {% endif %}
                        </div>
                        <button class="btn-secondary" type="submit" style="padding:0.5rem 1rem;font-size:0.875rem;">
                            关联
                        </button>
                    </form>
                {% endfor %}
            </div>
        </div>
    {% elif search_query %}
        <div style="padding:1rem;background:var(--warning-light);border-radius:var(--radius-md);margin-bottom:1.5rem;border-left:4px solid var(--warning);">
            <p style="margin:0;color:var(--text-primary);">⚠️ 未找到匹配的学生，试试其他关键词。</p>
        </div>
    {% endif %}
    
    <!-- Assigned Students -->
    <div>
        <h4 style="margin:0 0 1rem 0;color:var(--text-primary);">✅ 已关联学生（{{ assigned_students|length }}）</h4>
        {% if assigned_students %}
            <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0.75rem;">
                {% for student in assigned_students %}
                    <div style="padding:1rem;background:var(--surface);border-radius:var(--radius-md);border:1px solid var(--border-subtle);">
                        <div style="display:flex;align-items:center;gap:0.75rem;">
                            <div style="width:40px;height:40px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:600;flex-shrink:0;">
                                {{ student.username|first|upper }}
                            </div>
                            <div style="min-width:0;">
                                <div style="font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                                    {{ student.username }}
                                </div>
                                {% if student.get_full_name %}
                                    <div style="font-size:0.8125rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                                        {{ student.get_full_name }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div style="text-align:center;padding:3rem 1rem;color:var(--text-tertiary);">
                <div style="font-size:3rem;margin-bottom:0.5rem;">👤</div>
                <p style="margin:0;">还没有关联学生，先邀请你的学生在平台注册吧。</p>
            </div>
        {% endif %}
    </div>
</section>

<!-- Announcements -->
<section class="card" style="max-width:900px;margin:0 auto 2rem;">
    <h3 style="margin:0 0 0.5rem 0;">📢 发布公告</h3>
    <p style="margin:0 0 1.5rem 0;color:var(--text-secondary);">公告将推送给所有关联学生。</p>
    
    <form method="post" style="display:grid;gap:1.25rem;padding:1.25rem;background:var(--warning-light);border-radius:var(--radius-lg);margin-bottom:1.5rem;">
        {% csrf_token %}
        <input type="hidden" name="action" value="create_announcement">
        {% for field in announcement_form %}
            <div>
                <label for="{{ field.id_for_label }}" style="display:block;margin-bottom:0.5rem;font-weight:500;color:var(--text-primary);">
                    {{ field.label }}{% if field.field.required %}<span style="color:var(--danger);margin-left:0.25rem;">*</span>{% endif %}
                </label>
                {{ field }}
                {% if field.help_text %}
                    <small style="display:block;color:var(--text-secondary);margin-top:0.375rem;">{{ field.help_text }}</small>
                {% endif %}
                {% for error in field.errors %}
                    <small style="color:var(--danger);display:block;margin-top:0.375rem;">{{ error }}</small>
                {% endfor %}
            </div>
        {% endfor %}
        <button class="btn-primary" type="submit" style="justify-self:start;padding:0.625rem 1.5rem;">
            📣 发布公告
        </button>
    </form>
    
    <div>
        <h4 style="margin:0 0 1rem 0;color:var(--text-primary);">📋 最近公告</h4>
        {% if announcements %}
            <div style="display:flex;flex-direction:column;gap:1rem;">
                {% for announcement in announcements %}
                    <div style="padding:1.25rem;background:var(--warning-light);border-radius:var(--radius-lg);border-left:4px solid var(--warning);">
                        <div style="display:flex;justify-content:space-between;align-items:start;gap:1rem;margin-bottom:0.75rem;">
                            <div style="flex:1;min-width:0;">
                                <h5 style="margin:0 0 0.25rem 0;color:var(--text-primary);font-size:1rem;">{{ announcement.title }}</h5>
                                <small style="color:var(--text-tertiary);">{{ announcement.created_at|date:"Y-m-d H:i" }}</small>
                            </div>
                            <div style="display:flex;gap:0.5rem;flex-shrink:0;">
                                <a class="btn-secondary" href="{% url 'accounts:announcement_edit' announcement.pk %}" style="padding:0.5rem 1rem;font-size:0.875rem;">
                                    ✏️ 编辑
                                </a>
                                <form method="post" action="{% url 'accounts:announcement_delete' announcement.pk %}">
                                    {% csrf_token %}
                                    <button class="btn-link" type="submit" style="padding:0.5rem 1rem;font-size:0.875rem;color:var(--danger);">
                                        🗑️ 撤回
                                    </button>
                                </form>
                            </div>
                        </div>
                        <p style="margin:0;color:var(--text-secondary);line-height:1.6;white-space:pre-wrap;">{{ announcement.content }}</p>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div style="text-align:center;padding:3rem 1rem;color:var(--text-tertiary);">
                <div style="font-size:3rem;margin-bottom:0.5rem;">📭</div>
                <p style="margin:0;">暂无公告</p>
            </div>
        {% endif %}
    </div>
</section>

<!-- Pending Reviews -->
<section class="card" style="max-width:900px;margin:0 auto 2rem;">
    <h3 style="margin:0 0 0.5rem 0;">✅ 待批阅错题</h3>
    <p style="margin:0 0 1.5rem 0;color:var(--text-secondary);">及时给予反馈，帮助学生纠正错误。</p>
    
    {% if pending_mistakes %}
        <div style="display:flex;flex-direction:column;gap:1rem;">
            {% for mistake in pending_mistakes %}
                <div style="padding:1.25rem;background:var(--surface-elevated);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);">
                    <div style="display:flex;justify-content:space-between;align-items:start;gap:1rem;margin-bottom:1rem;">
                        <div style="flex:1;">
                            <h5 style="margin:0 0 0.5rem 0;color:var(--text-primary);font-size:1rem;">{{ mistake.title }}</h5>
                            <div style="display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;">
                                <span class="pill" style="background:var(--accent-soft);color:var(--accent);font-size:0.8125rem;">
                                    👤 {{ mistake.student.get_full_name|default:mistake.student.username }}
                                </span>
                                <span style="color:var(--text-tertiary);font-size:0.8125rem;">
                                    {{ mistake.created_at|date:"Y-m-d H:i" }}
                                </span>
                            </div>
                        </div>
                        <a class="btn-secondary" href="{{ mistake.get_absolute_url }}" style="padding:0.5rem 1rem;font-size:0.875rem;white-space:nowrap;">
                            查看详情 →
                        </a>
                    </div>
                    <form method="post" action="{% url 'accounts:profile' %}" style="display:grid;gap:0.75rem;padding-top:1rem;border-top:1px solid var(--border-subtle);">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="resolve_mistake">
                        <input type="hidden" name="mistake_id" value="{{ mistake.pk }}">
                        <div>
                            <label for="id_feedback_{{ mistake.pk }}" style="display:block;margin-bottom:0.5rem;font-weight:500;font-size:0.875rem;color:var(--text-primary);">
                                反馈建议
                            </label>
                            <textarea id="id_feedback_{{ mistake.pk }}" name="feedback" rows="3" 
                                      placeholder="给学生的建议..."
                                      style="width:100%;padding:0.75rem;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--surface);resize:vertical;"></textarea>
                        </div>
                        <button class="btn-primary" type="submit" style="justify-self:start;padding:0.5rem 1.25rem;">
                            ✓ 批阅完成
                        </button>
                    </form>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div style="text-align:center;padding:3rem 1rem;color:var(--text-tertiary);">
            <div style="font-size:3rem;margin-bottom:0.5rem;">✨</div>
            <p style="margin:0;">暂无待批阅错题</p>
        </div>
    {% endif %}
</section>

<!-- Pending Notes -->
<section class="card" style="max-width:900px;margin:0 auto 2rem;">
    <h3 style="margin:0 0 0.5rem 0;">📰 待审核笔记</h3>
    <p style="margin:0 0 1.5rem 0;color:var(--text-secondary);">
        学生提交的笔记通过审核后将展示在公共笔记区。
    </p>

    {% if pending_notes %}
        <div style="display:flex;flex-direction:column;gap:1rem;">
            {% for note in pending_notes %}
                <article style="padding:1.25rem;background:var(--surface-elevated);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);">
                    <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;">
                        <div style="flex:1;">
                            <h4 style="margin:0 0 0.5rem 0;color:var(--text-primary);font-size:1.05rem;">{{ note.title }}</h4>
                            <div style="display:flex;flex-wrap:wrap;gap:0.5rem;font-size:0.85rem;color:var(--text-secondary);">
                                <span class="pill" style="background:var(--accent-soft);color:var(--accent);">👤 {{ note.student.username }}</span>
                                <span>提交时间：{{ note.submitted_at|date:"Y-m-d H:i" }}</span>
                                <span>上次修改：{{ note.updated_at|date:"Y-m-d H:i" }}</span>
                            </div>
                            <p style="margin:0.75rem 0 0;color:var(--text-secondary);font-size:0.9rem;line-height:1.6;">
                                {{ note.content|striptags|truncatechars:180 }}
                            </p>
                        </div>
                        <div style="display:flex;flex-direction:column;gap:0.5rem;flex-shrink:0;">
                            <a class="btn-secondary" href="{{ note.get_absolute_url }}" style="padding:0.5rem 1rem;font-size:0.875rem;white-space:nowrap;">
                                查看笔记 →
                            </a>
                            <form method="post" action="{% url 'learning:notebook_publish' note.pk %}">
                                {% csrf_token %}
                                <button type="submit" class="btn-primary" style="padding:0.5rem 1rem;font-size:0.875rem;white-space:nowrap;">
                                    ✅ 通过公开
                                </button>
                            </form>
                            <form method="post" action="{% url 'learning:notebook_reject' note.pk %}">
                                {% csrf_token %}
                                <button type="submit" class="btn-link" style="padding:0.5rem 1rem;font-size:0.875rem;color:var(--danger);">
                                    ⛔ 驳回修改
                                </button>
                            </form>
                        </div>
                    </div>
                </article>
            {% endfor %}
        </div>
    {% else %}
        <div style="text-align:center;padding:3rem 1rem;color:var(--text-tertiary);">
            <div style="font-size:3rem;margin-bottom:0.5rem;">📘</div>
            <p style="margin:0;">暂无待审核笔记</p>
        </div>
    {% endif %}
</section>

<!-- Assignments -->
<section class="card" style="max-width:900px;margin:0 auto;">
    <h3 style="margin:0 0 0.5rem 0;">📝 发布作业</h3>
    <p style="margin:0 0 1.5rem 0;color:var(--text-secondary);">布置课后练习，帮助学生巩固知识。</p>
    
    <form method="post" style="display:grid;gap:1.25rem;padding:1.25rem;background:var(--success-light);border-radius:var(--radius-lg);margin-bottom:1.5rem;">
        {% csrf_token %}
        <input type="hidden" name="action" value="create_assignment">
        {% for field in assignment_form %}
            <div>
                <label for="{{ field.id_for_label }}" style="display:block;margin-bottom:0.5rem;font-weight:500;color:var(--text-primary);">
                    {{ field.label }}{% if field.field.required %}<span style="color:var(--danger);margin-left:0.25rem;">*</span>{% endif %}
                </label>
                {{ field }}
                {% if field.help_text %}
                    <small style="display:block;color:var(--text-secondary);margin-top:0.375rem;">{{ field.help_text }}</small>
                {% endif %}
                {% for error in field.errors %}
                    <small style="color:var(--danger);display:block;margin-top:0.375rem;">{{ error }}</small>
                {% endfor %}
            </div>
        {% endfor %}
        <button class="btn-primary" type="submit" style="justify-self:start;padding:0.625rem 1.5rem;">
            ✍️ 发布作业
        </button>
    </form>
    
    <div style="margin-bottom:2rem;">
        <h4 style="margin:0 0 1rem 0;color:var(--text-primary);">📚 最近作业</h4>
        {% if assignments %}
            <div style="display:flex;flex-direction:column;gap:1rem;">
                {% for assignment in assignments %}
                    <div style="padding:1.25rem;background:var(--success-light);border-radius:var(--radius-lg);border-left:4px solid var(--success);">
                        <div style="display:flex;justify-content:space-between;align-items:start;gap:1rem;margin-bottom:0.75rem;">
                            <div style="flex:1;min-width:0;">
                                <h5 style="margin:0 0 0.5rem 0;color:var(--text-primary);font-size:1rem;">{{ assignment.title }}</h5>
                                <div style="display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;">
                                    {% if assignment.due_date %}
                                        <span class="pill" style="background:var(--success);color:white;font-size:0.75rem;">
                                            ⏰ 截止 {{ assignment.due_date|date:"Y-m-d" }}
                                        </span>
                                    {% endif %}
                                </div>
                            </div>
                            <div style="display:flex;gap:0.5rem;flex-shrink:0;">
                                <a class="btn-secondary" href="{% url 'accounts:assignment_edit' assignment.pk %}" style="padding:0.5rem 1rem;font-size:0.875rem;">
                                    ✏️ 编辑
                                </a>
                                <form method="post" action="{% url 'accounts:assignment_delete' assignment.pk %}">
                                    {% csrf_token %}
                                    <button class="btn-link" type="submit" style="padding:0.5rem 1rem;font-size:0.875rem;color:var(--danger);">
                                        🗑️ 撤回
                                    </button>
                                </form>
                            </div>
                        </div>
                        <p style="margin:0;color:var(--text-secondary);line-height:1.6;white-space:pre-wrap;">{{ assignment.description }}</p>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div style="text-align:center;padding:3rem 1rem;color:var(--text-tertiary);">
                <div style="font-size:3rem;margin-bottom:0.5rem;">📚</div>
                <p style="margin:0;">尚未发布作业</p>
            </div>
        {% endif %}
    </div>
    
    <div>
        <h4 style="margin:0 0 1rem 0;color:var(--text-primary);">📬 学生提交情况</h4>
        {% if recent_submissions %}
            <div style="display:flex;flex-direction:column;gap:1rem;">
                {% for submission in recent_submissions %}
                    <div style="padding:1.25rem;background:var(--accent-soft);border-radius:var(--radius-lg);border-left:4px solid var(--accent);">
                        <div style="display:flex;justify-content:space-between;align-items:start;gap:1rem;margin-bottom:0.75rem;">
                            <div>
                                <div style="font-weight:600;color:var(--text-primary);margin-bottom:0.25rem;">
                                    {{ submission.student.get_full_name|default:submission.student.username }}
                                </div>
                                <div style="font-size:0.875rem;color:var(--text-secondary);">
                                    提交了 <strong>{{ submission.assignment.title }}</strong>
                                </div>
                            </div>
                            <span style="font-size:0.8125rem;color:var(--text-tertiary);white-space:nowrap;">
                                {{ submission.submitted_at|date:"Y-m-d H:i" }}
                            </span>
                        </div>
                        {% if submission.content %}
                            <div style="padding:0.75rem;background:var(--surface);border-radius:var(--radius-md);border:1px solid var(--border-subtle);">
                                <p style="margin:0;color:var(--text-secondary);line-height:1.6;white-space:pre-wrap;">{{ submission.content }}</p>
                            </div>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div style="text-align:center;padding:3rem 1rem;color:var(--text-tertiary);">
                <div style="font-size:3rem;margin-bottom:0.5rem;">📭</div>
                <p style="margin:0;">暂无最新作业提交</p>
            </div>
        {% endif %}
    </div>
</section>
{% endblock %}
